<script setup>
import Steps from "!/Steps/Steps.vue";
import step from "!/Steps/step.vue";
import { ref, provide,onMounted } from "vue";
import { useField } from "vee-validate";
import {
  isRequiredUser,
  isRequiredCode,
  isRequiredSms,
  isRequiredAccount,
  isRequiredPassword1,
} from "./validation";
const active = ref(0);
const s = ref("发送验证码");
const disabled = ref(false);
const activeNext = () => {
  active.value = active.value + 1;
};

const isRequieredPassword2 = (value) => {
  if (value && value == password.value) {
    return true;
  }
  return "两次输入的密码不一致";
};

const { value: userValue, errorMessage: errorUser } = useField(
  "fieldName",
  isRequiredUser
);
const { value: codeValue, errorMessage: errorCode } = useField(
  "fieldName",
  isRequiredCode
);
const { value: smsValue, errorMessage: errorSms } = useField(
  "fieldName",
  isRequiredSms
);
const { value: accountValue, errorMessage: errorAccount } = useField(
  "fieldName",
  isRequiredAccount
);
const { value: passwordValue, errorMessage: errorPassword } = useField(
  "fieldName",
  isRequiredPassword1
);
const { value: password2Value, errorMessage: errorPassword2 } = useField(
  "fieldName",
  isRequieredPassword2
);
const account = ref(accountValue);
const user = ref(userValue);
const code = ref(codeValue);
const sms = ref(smsValue);
const password = ref(passwordValue);
const password2 = ref(password2Value);

const validaUser = () => {
  user.value = user.value.replace(/[^a-zA-Z0-9]/g, "");
};
const validaCode = () => {
  code.value = code.value.replace(/[^a-zA-Z0-9]/g, "");
};


onMounted(()=>{
  console.log('xxx');
})  

const sendSms = () => {
  if (!account.value) return ElMessage.error("请填写手机号");
  if (errorAccount.value) return ElMessage.error("手机号码格式错误");
  if (!disabled.value) {
    disabled.value = true;
    s.value = 60;
    let time = setInterval(() => {
      s.value = s.value -= 1;
      if (s.value == 0) {
        clearInterval(time);
        time = null;
        s.value = "发送验证码";
        disabled.value = false;
      }
    }, 1000);
  }
};
</script>

<template>
  <div class="forget-password">
    <div class="forget-password-card">
      <div class="forget-card-title">重置密码</div>
      <div class="forget-card-content" v-if="!(active == 3)">
        <Steps :active="active">
          <step index="0" title="填写账户名"></step>
          <step index="1" title="验证身份"></step>
          <step index="2" title="设置新密码"></step>
          <step index="3" title="完成"></step>
        </Steps>

        <div class="form-username form-box" v-if="active == 0">
          <div class="inputs">
            <div class="inputs-label">
              <span>用户名:</span>
              <el-input
                v-model="user"
                type="text"
                :clearable="true"
                @input="validaUser"
                placeholder="请输入用户名称"
              >
              </el-input>
            </div>
            <div class="err-info">{{ errorUser }}</div>
          </div>
          <div class="inputs">
            <div class="inputs-label">
              <span>验证码:</span>
              <el-input
                v-model="code"
                type="text"
                :clearable="true"
                @input="validaCode"
                placeholder="请输入验证码"
              >
              </el-input>
            </div>
            <div class="err-info">{{ errorCode }}</div>
          </div>
          <div style="width: 60%; margin: 0 auto">
            <div class="validation-code">
              <div class="code-img"></div>
              <div>看不清? <span style="color: #1abc9c">换一张</span></div>
            </div>

            <div class="next-btn" @click="activeNext">下一步</div>
          </div>
        </div>

        <div class="form-sms form-box" v-if="active == 1">
          <div class="inputs">
            <div class="inputs-label">
              <span>手机号码:</span>
              <el-input
                v-model="account"
                type="number"
                :clearable="true"
                @input="validaUser"
                placeholder="请输入用户名称"
              >
              </el-input>
            </div>
            <div class="err-info">{{ errorAccount }}</div>
          </div>
          <div class="inputs">
            <div class="inputs-label">
              <span>验证码:</span>
              <el-input
                v-model="sms"
                type="number"
                :clearable="true"
                placeholder="输入验证码"
              >
                <template #suffix>
                  <div
                    class="send-sms"
                    :style="{
                      backgroundColor:
                        !disabled && account && !errorAccount
                          ? '#1abc9c'
                          : '#bcf1e5',
                    }"
                    @click="sendSms"
                  >
                    {{ s }}
                  </div>
                </template>
              </el-input>
            </div>
            <div class="err-info">{{ errorSms }}</div>
          </div>
          <div style="width: 60%; margin: 0 auto">
            <div class="next-btn" @click="activeNext">下一步</div>
          </div>
        </div>

        <div class="form-password form-box" v-if="active == 2">
          <div class="inputs">
            <div class="inputs-label">
              <span>新的密码:</span>
              <el-input
                v-model="password"
                class="w-50 m-2"
                type="password"
                :clearable="true"
                show-password
                placeholder="设置6至20位字母、数字、符号组合"
              >
                <template #prefix>
                  <i class="iconfont icon-jurassic_user"></i>
                </template>
              </el-input>
            </div>
            <div class="err-info">{{ errorPassword }}</div>
          </div>
          <div class="inputs">
            <div class="inputs-label">
              <span>重复密码:</span>
              <el-input
                v-model="password2"
                type="password"
                :clearable="true"
                show-password
                placeholder="请再次输入密码"
              >
                <template #prefix>
                  <i class="iconfont icon-jurassic_user"></i>
                </template>
              </el-input>
            </div>
            <div class="err-info">{{ errorPassword2 }}</div>
          </div>
          <div style="width: 60%; margin: 0 auto">
            <router-link to="/registeredAndLogin/forget/success"><div class="next-btn" @click="activeNext">下一步</div></router-link>
          </div>
        </div>
      </div>

      <!-- <div class="forget-card-content finish" v-else>
        <div class="forget-card-finish">
          <div></div>
          <p>密码重置成功</p>
          <p>下次请使用新的密码进行登录</p>
          <router-link to="/registeredAndLogin/login"><button>重新登录</button></router-link>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss">
.forget-password {
  background-color: #f5f5f5;
  padding: 50px;

  .forget-password-card {
    box-sizing: border-box;
    width: 70%;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 30px;

    .forget-card-title {
      padding: 40px 0;
      font-size: 16px;
      color: #999;
    }

    .forget-card-content {
      width: 75%;
      margin: 0 auto;

      .form-password,
      .form-sms {
        .inputs:nth-of-type(1) {
          margin-top: 40px;
        }
      }

      .inputs {
        width: 60%;
        margin: 0 auto;
        .inputs-label {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: 16px;
          }
        }

        .el-input {
          width: 80%;
        }

        input {
          height: 50px;
          outline: none;
        }

        .el-input__wrapper.is-focus {
          box-shadow: rgb(220, 223, 230) 0px 0px 0px 1px inset;
        }

        .el-input__wrapper {
          border-radius: 0;
          // border
        }

        .err-info {
          height: 20px;
          line-height: 20px;
          color: red;
        }

        .send-sms {
          // border: 1px solid #999;
          font-size: 12px;
          padding: 0 4px;
          cursor: pointer;
          width: 70px;
          text-align: center;
          color: #fff;
        }
      }

      .validation-code {
        width: 80%;
        margin-left: 20%;

        display: flex;
        align-items: center;

        div {
          width: 50%;
          text-align: center;
        }

        .code-img {
          height: 50px;
          background-color: #999;
        }
      }

      .next-btn {
        width: 80%;
        margin-top: 20px;
        margin-left: 20%;
        height: 50px;
        background-color: #1abc9c;
        cursor: pointer;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 15px;
        font-weight: 600;
      }
    }

    // .forget-card-content {
    //   &.finish {
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;

    //     height: calc(100% - 104px);
    //     .forget-card-finish {
    //       text-align: center;
    //       div {
    //         width: 100px;
    //         background-color: #1abc9c;
    //         height: 100px;
    //         margin: 0 auto;
    //       }

    //       // p {
    //       // }

    //       p:nth-of-type(1) {
    //         font-size: 16px;
    //         color: #333;
    //         margin-top: 10px;
    //       }

    //       p:nth-of-type(2) {
    //         font-size: 13px;
    //         color: #bbb;

    //         margin: 10px 0 25px 0;
    //       }

    //       button {
    //         border: none;
    //         width: 100%;
    //         height: 50px;
    //         color: #fff;
    //         background-color: #1abc9c;
    //       }
    //     }
    //   }
    // }
  }
}
</style>
